<template>
  <div>
    <el-button type="success" @click="insertVisibility = true">新增</el-button>
    <el-dialog :visible.sync="insertVisibility">
      <template #title>
        <span class="title"><i class="el-icon-document"></i>填写请假单</span>
      </template>
      <el-form
        ref="leaveBill"
        class="leaveBill"
        :model="leaveBill"
        :rules="rules"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="请假人：" style="text-align: left">
          <el-tag>{{ $store.state.userInfo.nickname }}</el-tag>
        </el-form-item>
        <el-form-item prop="leaveType" label="请假类型：">
          <el-select v-model.trim="leaveBill.leaveType" @change="selectType">
            <el-option
              v-for="e in this.$store.state.leaveTypeEnums"
              :key="e.index"
              :value="e.value"
              :label="e.text"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="请假时间：" prop="applyTimeRange">
          <el-date-picker type="datetimerange" v-model="applyTimeRange">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="reason" label="请假原因：">
          <el-input type="textarea" :rows="4" v-model="leaveBill.reason">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="leaveBillSubmit()"
            >提交
          </el-button>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.leaveBill.resetFields()"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import New from './components/New.vue';
import { leave } from "@/apis";

export default {
  name: "ApplyInsert",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      applyTimeRange: null,
      insertVisibility: false,
      leaveBill: {
        leaveType: "sickLeave",
        startTime: "2021-10-22T03:21:07.245Z",
        endTime: "2021-10-22T03:21:07.245Z",
        reason: "有事情",
        //  后端生成 或者其他业务流程中需要填写的
        applyTime: null,
        auditState: null,
        applier: null,
        applyState: null,
        auditor: null,
        auditorTime: null,
        auditorWord: null,
        leaveId: null,
        deleted: false,
        version: 0,
      },

      rules: {
        applyTimeRange: [
          // { required: true, message: "请输入请假时间", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    leaveBillSubmit() {
      this.$refs.leaveBill.validate((valid) => {
        if (valid) {
        /*  this.$http({
            method: "post",
            url: "http://localhost:9091/leave/leaveBill/insert",
            data: this.leaveBill,
          })*/
          leave.leaveInsert(this.leaveBill)
          .then(
            (res) => {
              this.$message.warning(JSON.stringify(res.data));
              this.insertVisibility = false;
              this.$emit("postSubmit");
            },
            (error) => {
              console.log(
                ".leaveBill request error : " + error.response.status
              );
            }
          );
        } else {
          this.$message.warning("验证不通过请重新填写表单");
        }
      });
    },
    selectType(item) {
      switch (item) {
        case "issueLeave":
          this.leaveBill.reason = "明天要体检，有事情耽误请假。";
          break;
        case "sickLeave":
          this.leaveBill.reason = "最近肠胃炎，坐立不安。";
          break;
        case "annualLeave":
          this.leaveBill.reason = "搬家请假，工作愉快";
          break;
        default:
          this.leaveBill.reason = "";
        //text = "期待周末~";
      }
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
    applyTimeRange(n, o) {
      this.$message.success("选择时间： " + JSON.stringify(n));
      if (n) {
        this.leaveBill.startTime = n[0];
        this.leaveBill.endTime = n[1];
      } else {
        this.leaveBill.startTime = null;
        this.leaveBill.endTime = null;
      }
    },
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 520px;
  margin-left: 60px;
  margin-top: 20px;
  .el-select {
    width: 100%;
  }
}
.title {
  font-family: "楷体";
  font-weight: bold;
  font-size: 24px;
}
</style>
